/**
* VUEshop
* ============================================================================
* * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
* 网站地址: http://www.vueshop.com.cn
* ----------------------------------------------------------------------------
* 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
* 不允许对程序代码以任何形式任何目的的再发布。
* ============================================================================
* $Author: soubao-java 2020-07-22 $
*/<template>

	<el-card class="box-card">
		<!--<img class="login_bg" src="@/static/images/admin_04.jpg" alt="">-->
		<el-carousel :interval="4000" class="login_bg" indicator-position="none">
			<el-carousel-item class="lunbo-box-item login_bg" style="width:100%;height:100%;">
				<img src="@/static/images/admin_01.jpg" class="lunbotu" alt="轮播图">
			</el-carousel-item>
			<el-carousel-item class="lunbo-box-item login_bg" style="width:100%;height:100%;">
				<img src="@/static/images/admin_02.jpg" class="lunbotu" alt="轮播图">
			</el-carousel-item>
			<el-carousel-item class="lunbo-box-item login_bg" style="width:100%;height:100%;">
				<img src="@/static/images/admin_03.jpg" class="lunbotu" alt="轮播图">
			</el-carousel-item>
			<el-carousel-item class="lunbo-box-item login_bg" style="width:100%;height:100%;">
				<img src="@/static/images/admin_04.jpg" class="lunbotu" alt="轮播图">
			</el-carousel-item>
		</el-carousel>
		<div class="admin_logo">
			<img class="admin_logo" src="@/static/images/admin_logo.png" alt="">
		</div>
		<div slot="header" class="clearfix">
			<span>管理中心</span>
		</div>
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
			<el-form-item label="" prop="user_name">
				<el-input type="text" class="input360" placeholder="用户名" v-model="ruleForm.user_name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="" prop="password">
				<el-input type="password" class="input360" placeholder="密码" v-model="ruleForm.password" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="" prop="verification">
				<el-input v-model="ruleForm.verification" class="input360" placeholder="验证码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
				<img :src="verification_image" @click="fleshVerify" title="换一张" name="codeimage" border="0" class="image" />
			</el-form-item>
			<el-form-item>
				<el-button class="login_button" type="primary" @click="submitForm('ruleForm')" :loading="loging">登 录</el-button>
			</el-form-item>
		</el-form>
		<div class="opentips" v-if="openFlag">
			<div>
				账号:admin
			</div>
			<div>
				密码:soubao2020
			</div>
		</div>
	</el-card>
</template>

<script>
	import {
		setToken
	} from "@/utils/auth.js";
	import md5 from "@/utils/md5.js";
	import {
		getVerifyImage
	} from "@/utils/api";
	import {
		mapState,
	} from "vuex";
	export default {
		data() {
			var checkVerification = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入验证码"));
				} else {
					callback();
				}
			};
			var validateUserNname = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入用户名"));
				} else {
					callback();
				}
			};
			var validatePassword = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					user_name: "",
					password: "",
					verification: ""
				},
				rules: {
					user_name: [{
						validator: validateUserNname,
						trigger: "blur"
					}],
					checkPassword: [{
						validator: validatePassword,
						trigger: "blur"
					}],
					verification: [{
						validator: checkVerification,
						trigger: "blur"
					}]
				},
				verification_image: "",
				loging: false
			};
		},
		components: {},
		computed: {
			...mapState(['openFlag']),
		},
		created() {
			this.fleshVerify();
			if(this.openFlag){
				this.ruleForm.user_name = "admin"
				this.ruleForm.password = "soubao2020"
			}
		},
		methods: {
			submitForm(formName) {
				var that = this;
				this.$refs[formName].validate(valid => {
					if (valid) {
						that.login();
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			login() {
				this.loging = true;
				var that = this;
				var requestForm = {
					user_name: this.ruleForm.user_name,
					password: md5("TPSHOP" + this.ruleForm.password),
					verification: this.ruleForm.verification
				};
				this.request.post("/admin/login", requestForm).then(function(res) {
					if (res.hasOwnProperty("access_token")) {
						setToken(res.access_token);
						that.$router.push({
							name: "system"
						});
					} else {
						that.$message({
							showClose: true,
							message: "登录失败,失败原因:" + res.msg,
							type: "error"
						});
						that.fleshVerify();
						that.ruleForm.verification = null;
					}
					that.loging = false;
				});
			},
			fleshVerify() {
				var that = this;
				var random = Math.random();
				getVerifyImage({
					t: random
				}).then(function(res) {
					that.verification_image = res;
				});
			}
		}
	};
</script>

<style scoped>
	.opentips {
		font-size: 15px;
		padding-left: 51px;
	}

	>>>.image {
		width: 100px;
		display: block;
		margin-top: 10px;
	}

	>>>.text {
		font-size: 14px;
	}

	>>>.item {
		margin-bottom: 18px;
	}

	>>>.clearfix:before,
	>>>.clearfix:after {
		display: table;
		content: "";
	}

	>>>.clearfix:after {
		clear: both;
	}

	.box-card {
		width: 500px;
		margin: 200px auto;
	}

	>>>.admin_logo {
		position: absolute;
		top: 50px;
	}

	>>>.admin_logo img {
		width: 203px;
		height: 79px;
	}

	>>>.login_bg {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		overflow: hidden;
		z-index: -999;
		height: 100%;
		width: 100%;
	}

	>>>.demo-ruleForm {
		width: 360px;
		margin: 0 auto;
	}

	>>>.input360 {
		width: 360px;
	}

	>>>.input360 input {
		width: 360px;
		border-bottom: 1px solid #E5E5E5 !important;
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		outline: none;
		height: 40px;
		display: inline-block;
		margin-top: 10px;

	}

	>>>.clearfix {
		text-align: center;
		color: #333;
		font-size: 30px;
	}

	>>>.login_button {
		width: 100%;
		height: 55px;
		border: 0;
		background: #148EFF;
		color: #FFF;
		padding: 0;
		font-size: 18px;
		letter-spacing: 10px;
		cursor: pointer;
		border-radius: 5px;
		margin: 30px auto 0;
		display: block;
	}
</style>
